<template>
  <el-dialog
    v-model="dialogVisible"
    draggable
    :z-index="500"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    title="文章预览"
    width="680px"
    center
    top="5vh"
  >
    <div class="title">{{ formValue.title }}</div>

    <div></div>

    <div class="content" v-html="formValue.content"></div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

let dialogVisible = ref(false)

let formValue = ref({
  no: '',
  title: '',
  content: '',
  category: null,
  picture: '',
  keyword: '',
  istop: 0,
  issueTime: '',
  source: '',
  link: '',
  auditState: null,
  auditDescribe: '',
  account: ''
})

function open(entity) {
  dialogVisible.value = true

  formValue.value = entity

  document.getElementById('content').innerHTML = entity.content
}

defineExpose({ open })
</script>

<style>
.title {
  max-width: 600px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
.content {
  margin-top: 20px;
  width: 640px;
  padding: 10px;
  height: 600px;
  overflow-y: auto;
}
.content * {
  max-width: 600px;
}
</style>